﻿@page "/progresss"

<h3>Progress 进度条</h3>

<h4>用于展示操作进度，告知用户当前状态和预期</h4>

<DemoBlock Title="进度条组件" Introduction="常用的进度条" Name="Progress">
    <div class="row g-3">
        <div class="col-12">
            <Progress Value="0"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="25"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="50"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="75"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="100"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="显示值" Introduction="通过 <code>IsShowValue</code> 设置进度条值显示" Name="DispalyValue">
    <Progress Value="25" IsShowValue="true"></Progress>
</DemoBlock>

<DemoBlock Title="设置进度条高度" Introduction="通过 <code>Height</code> 进度条高度设置" Name="Height">
    <Progress Value="25" IsShowValue="true" Height="32"></Progress>
</DemoBlock>

<DemoBlock Title="带颜色进度条" Introduction="设置进度条颜色" Name="Color">
    <div class="row g-3">
        <div class="col-12">
            <Progress Value="25" Color="Color.Success" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="50" Color="Color.Info" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="是否显示条纹" Introduction="通过 <code>IsStriped</code> 设置进度条的条纹设置" Name="Stripe">
    <div class="row g-3">
        <div class="col-12">
            <Progress IsStriped="true" Value="25" Color="Color.Success" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsStriped="true" Value="50" Color="Color.Info" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsStriped="true" Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsStriped="true" Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="是否动态显示" Introduction="通过 <code>IsAnimated</code> 设置进度条的动态显示" Name="Dynamic">
    <div class="row g-3">
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="25" Color="Color.Success" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="50" Color="Color.Info" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="双向绑定数据" Introduction="绑定数据" Name="Binding">
    <div class="row g-3">
        <div class="col-12">
            <BootstrapInput TItem="int" @bind-Value="@Value" />
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" @bind-Value="@Value" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
